<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>WebGL Font Rendering Demo</title>
  </head>
  <body>
    <div align="center">

      <div><h1>WebGL Font Rendering</h1>
        <a href="https://github.com/astiopin/webgl_fonts">Click for the source</a><br/><br/>
      </div>
      <canvas width = "700" height = "400" id = "glcanvas"></canvas>
      <div style="padding:10px">
        <table width="400">
          <tr>
            <td>Font</td>
            <td><select id="fonts">
                <option value="roboto">Roboto</option>
                <option value="roboto_bold">Roboto Bold</option>
                <option value="ubuntu">Ubuntu</option>
                <option value="ubuntu_bold">Ubuntu Bold</option>
                <option value="dejavu">DejaVu Serif</option>
                <option value="dejavu_italic">DejaVu Serif Italic</option>                
            </select></td>
          </tr>
          <tr>
            <td>Font size</td>
            <td><input id = "font_size" type="number" min="5" max="30" value="10"></input></td>
          </tr>
          <tr>
            <td>Font hinting</td>
            <td><input id = "font_hinting" type = "checkbox" checked="checked"></input></td>
          </tr>
          <tr>
            <td>Subpixel rendering</td>
            <td><input id = "subpixel" type = "checkbox" checked="checked"></input></td>
          </tr>
          <tr>
            <td>Font color</td>
            <td><input id = "font_color" type="color" value="#1a1a1a"></input></td>
          </tr>
          <tr>
            <td>Background color</td>
            <td><input id = "background_color" type="color" value="#e5e5e5"></input></td>
          </tr>
        </table>
      </div>
      <div><textarea cols="80" rows="20" id = "text"></textarea></div>
    </div>
    <script src="fonts/roboto.js"></script>
    <script src="fonts/roboto-bold.js"></script>
    <script src="fonts/dejavu-serif.js"></script>
    <script src="fonts/dejavu-serif-italic.js"></script>
    <script src="fonts/ubuntu.js"></script>
    <script src="fonts/ubuntu-bold.js"></script>
    
    <script src="glutils.js"></script>
    <script src="textutils.js"></script>    
    <script src="vshader.js"></script>
    <script src="fshader.js"></script>
    <script src="main.js"></script>
    <script>
      glMain();
    </script>
  </body>
</html>
